<template>
	<view class="box">
		<view class="bg-image" :style="[{
			backgroundImage:bgImageStyle.backgroundImage
		}]" @click="seeImg">
			<view class="user-tip">
				<view class="user-tip-left" @click.stop="gotoUser">
					<image v-if="workObj.user.img" class="user-logo" :src="workObj.user.img" mode=""></image>
					<image v-if="!workObj.user.img" class="user-logo" src="../../static/my_icon_head@2x.png" ></image>
					<span>{{workObj.user.nickname}}</span>
				</view>
				<view class="user-guanzhu-btn" @click.stop="guanzhuFun" v-if="!gzSb && !is_userSelf">
					<u-icon name="plus" size="14" color="#fff"></u-icon>
					<span>关注</span> 
				</view>
				<view class="user-guanzhu-none-btn" @click.stop="guanzhuFun" v-if="gzSb && !is_userSelf">
					<span>取消关注</span> 
				</view>
			</view>
			<view class="edit-box" @click.stop="show = true" v-if="is_userSelf">
				<u-icon name="list" size="20" color="#fff"></u-icon>
			</view>
		</view>
		<view class="content-details">
			<view class="content-title">{{workObj.title}}</view>
			<view class="content-text">{{workObj.content}}</view>
			<view class="content-tip">
				<view class="content-xian"></view>
				<p>以下对话内容使用AI生成</p>
				<view class="content-xian"></view>
			</view>
			<view class="content-scroll">
				<view class="chat-list" v-for="(item,index) in workObj.dialog" :key="item">
					<view class="chat-list-left">
						<image v-if="item.role == 'user' && workObj.user.img" class="logo-img" :src="workObj.user.img" ></image>
						<image v-if="item.role == 'user' && !workObj.user.img" class="logo-img" src="../../static/my_icon_head@2x.png" ></image>
						<image v-if="item.role == 'system'" class="logo-img" src="../../static/picture_roboto_icon@2x.png" mode="widthFix"></image>
					</view>
					<view class="chat-list-right">
						<view v-if="item.type == 'text'">{{item.message}}</view>
						<image class="ai-img-sheng" v-if="item.type == 'img'" :src="item.message" @click.stop="seeImg(item.message)" mode="widthFix"></image>
					</view>
				</view>
				<view class="content-bottom">
					<view class="content-bottom-left">{{workObj.created_at}}</view>
					<view class="content-bottom-right" @click="jbshow = true" v-if="!is_userSelf">举报作品</view>
				</view>
			</view>
		</view>
		<view class="content-dibu-box">
			<div class="content-dibu-cotent">
				<view class="icon-box-left">
					<view class="icon-box" >
						<u-icon name="heart" size="28" v-if="!dzSb" @click="dianzan"></u-icon>
						<u-icon name="heart-fill" size="28" color="red" v-if="dzSb" @click="dianzanF"></u-icon>
						<span>{{workObj.likes}}</span>
					</view>
					<view class="icon-box">
						<button class="share-btn" open-type="share"></button>
						<u-icon name="share" size="28"></u-icon>
						<!-- <span>{{workObj.share}}</span> -->
					</view>
				</view>
				<view class="content-dibu-right" @click="gotochat">
					我也要聊
				</view>
			</div>
		</view>
		<u-action-sheet @select="selectClick" @close="show = false" :actions="list" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消" :show="show"></u-action-sheet>
		<u-action-sheet @select="selectClickjb" @close="jbshow = false" :actions="jblist" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消" :show="jbshow"></u-action-sheet>
		<u-action-sheet @select="selectClickjbFun" @close="jbshowTf = false" title="请选择举报理由" :actions="jblistcontent" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消" :show="jbshowTf"></u-action-sheet>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	import { mapActions,mapMutations } from 'vuex'
	
	export default{
		data(){
			return{
				wid:'',
				bgImageStyle:{
					backgroundImage:'',
				},
				workObj:{
					dialog:[]
				},
				list:[
					{
						name: '删除作品',
						id:0,
					},
				],
				jblist:[
					{
						name: '我要举报',
						id:303,
					},
				],
				jblistcontent:[
					//举报内容
					{
						name: '色情低俗信息',
					},
					{
						name: '违禁品信息',
					},
					{
						name: '政治敏感信息',
					},
					{
						name: '广告信息',
					},
					{
						name: '涉嫌辱骂及个人隐私',
					},
					{
						name: '涉未成年人不良信息',
					},
				],
				user_id:'',
				dzSb:false,//是否点赞
				gzSb:false,//是否关注
				show:false,//是否编辑
				jbshow:false,//是否举报
				jbshowTf:false,//举报内容
				is_userSelf:false,//是否本人
				timer:'',
			}
		},
		onLoad(e) {
			this.wid = e.wid
			this.user_id = uni.getStorageSync('uid')
			this.getWorkDetails()
		},
		methods:{
			...mapMutations(['ADD_LIKE','DELETE_LIKE']),
			getWorkDetails(){
				uni.showLoading()
				
				http.getUserWorkDetails({
					wid:this.wid,
					user_id:this.user_id,
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						this.workObj =  res.data.result
						// this.workObj.dialog.reverse()
						//是否关注作者
						http.getIsUserFollow({
							user_id:this.user_id,
							follow_id:this.workObj.user.id
						}).then((res)=>{
							this.gzSb = res.data.result == 0 ? false : true
						})
						
						this.bgImageStyle.backgroundImage = `url(${this.workObj.image})`
						this.workObj.user.id == this.user_id ? this.is_userSelf = true : this.is_userSelf = false
						this.dzSb = this.workObj.liked == 0 ? false : true
						
						let chatArray = this.workObj.dialog
						chatArray.forEach((item)=>{
							if(item.message.includes('ytslgz.cn') || item.message.includes('chatglm.cn')){
								item.type = 'img'
							}else{
								item.type = 'text'
							}
						})
					}else{
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateBack({
										delta:1
									})
								}
							}
						});
					}
				})
			},
			gotochat(){
				if(!this.user_id){
					uni.showModal({
						title: '提示',
						content: '暂无登录，请前去登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false
				}
				if(this.workObj.app){
					uni.navigateTo({
						url:'/pages/singleChat/singleChat?appid='+this.workObj.appid+'&name='+this.workObj.app.name+'&welcome_message='+this.workObj.app.welcome_message
					})
				}else{
					uni.navigateTo({
						url:'/pages/singleChat/singleChat?appid='+this.workObj.appid+'&name='+this.workObj.title+'&welcome_message='+'你好！'
					})
				}
				
			},
			//关注
			guanzhuFun(){
				if(!this.gzSb){
					http.getUserFollow({
						user_id:this.user_id,
						follow_id:this.workObj.user.id
					}).then((res)=>{
						if(res.data.code == 200){
							uni.showToast({
								title:'关注成功',
								icon:'none'
							})
							this.getWorkDetails()
						}
					})
				}else{
					http.getUserFollowF({
						user_id:this.user_id,
						follow_id:this.workObj.user.id
					}).then((res)=>{
						if(res.data.code == 200){
							uni.showToast({
								title:'取消关注',
								icon:'none'
							})
							this.getWorkDetails()
						}
					})
				}
			},
			//点赞
			dianzan(){
				if(!this.user_id){
					uni.showModal({
						title: '提示',
						content: '暂无登录，请前去登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false
				}
				this.$nextTick(()=>{
					if(!this.dzSb){
						clearTimeout(this.timer)
						uni.showLoading()
						this.timer = setTimeout(()=>{
							http.getWorkLikeT({
								wid:this.wid,
								user_id:this.user_id
							}).then((res)=>{
								console.log(res)
								uni.hideLoading()
								if(res.data.code == 200){
									this.dzSb = true
									this.workObj.likes = this.workObj.likes+1
								}else{
									uni.showToast({
										title:res.data.result,
										icon:'none'
									})
								}
							})
						},500)
					}else{
						
					}
				})
				
			},
			//取消点赞
			dianzanF(){
				if(!this.user_id){
					uni.showModal({
						title: '提示',
						content: '暂无登录，请前去登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false
				}
				this.$nextTick(()=>{
					if(this.dzSb){
						clearTimeout(this.timer)
						uni.showLoading()
						this.timer = setTimeout(()=>{
							http.getWorkLikeF({
								wid:this.wid,
								user_id:this.user_id
							}).then((res)=>{
								uni.hideLoading()
								if(res.data.code == 200){
									this.dzSb = false
									this.workObj.likes = this.workObj.likes-1
								}else{
									uni.showToast({
										title:res.data.result,
										icon:'none'
									})
								}
							})
						},500)
					}else{
						
					}
				})
			},
			gotoUser(){
				uni.navigateTo({
					url:'/pages/work/user?id='+this.workObj.user.id
				})
			},
			//预览图片
			seeImg(url){
				let imgArray = []
				imgArray.push(url)
				uni.previewImage({
					urls: imgArray,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//编辑作品
			selectClick(item){
				console.log(item)
				let _this = this
				if(item.id == 0){
					//删除作品
					uni.showModal({
						title: '提示',
						content: '是否确定删除作品？',
						success: function (res) {
							if (res.confirm) {
								http.getDeleteWork({
									user_id:_this.user_id,
									wid:_this.workObj.id
								}).then((res)=>{
									if(res.data.code == 200){
										uni.showModal({
											title: '提示',
											content: '删除作品成功！',
											showCancel:false,
											success: function (res) {
												uni.redirectTo({
													url:'/pages/my/my'
												})
											},
										})
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//我要举报
			selectClickjb(item){
				if(item.id == 303){
					this.jbshowTf = true
				}
			},
			selectClickjbFun(item){
				console.log(item)
				http.getUserReport({
					user_id:this.user_id,
					report_user_id:this.workObj.user.id,
					content:item.name
				}).then((res)=>{
					uni.showToast({
						title:res.data.result,
						icon:'success'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
		height:100vh;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		.bg-image {
		  transform-origin: top;
		  background-size: cover;
		  height: 300px;
		  width: 100%;
		  position: fixed;
		  z-index: 0;
		  .edit-box{
			  position: absolute;
			  top: 10px;
			  right: 10px;
			  z-index: 10;
			  width: 30px;
			  height: 30px;
			  background: rgba(0,0,0,0.5);
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  justify-content: center;
			  border-radius: 10px;
		  }
		  .user-tip{
			  position: absolute;
			  top: 10px;
			  left: 10px;
			  z-index: 10;
			  display: flex;
			  flex-direction: row;
			  align-items: center;
			  .user-tip-left{
					display: flex;
					flex-direction: row;
					align-items: center;
					.user-logo{
						width: 30px;
						height: 30px;
						border-radius: 50%;
						background-color: #999;
						margin-right: 10px;
					}
					span{
						font-size: 14px;
						color: #fff;
					}
			  }
			  .user-guanzhu-none-btn{
				  width: 80px;
				  font-size: 12px;
				  background-color: rgba(0, 0, 0, 0.8);
				  color: #fff;
				  height: 30px;
				  border-radius: 15px;
				  display: flex;
				  flex-direction: row;
				  align-items: center;
				  justify-content: center;
				  margin-left: 15px;
			  }
			  .user-guanzhu-btn{
				  width: 60px;
				  font-size: 12px;
				  background-color: $main-color;
				  color: #fff;
				  height: 30px;
				  border-radius: 15px;
				  display: flex;
				  flex-direction: row;
				  align-items: center;
				  justify-content: center;
				  margin-left: 15px;
				  span{
					  margin-left: 5px;
				  }
			  }
		  }
		  
		}
		.content-details{
			transform: translateY(280px);
			width: 100%;
			min-height: 100vh;
			border-radius: 20px 20px 0 0;
			background: #fff;
			box-sizing: border-box;
			padding: 20px;
			.content-title{
				width: 100%;
				font-size: 16px;
				font-weight: bold;
				color: #000;
				margin-bottom: 10px;
			}
			.content-text{
				width: 100%;
				color: #444;
				font-size: 14px;
				margin-bottom: 15px;
			}
			.content-tip{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.content-xian{
					width: calc((100% - 150px)/2);
					height: 1px;
					border-bottom: 1px solid #999;
				}
				p{
					width: 150px;
					font-size: 12px;
					color: #999;
					text-align: center;
				}
			}
			.content-scroll{
				width: 100%;
				margin-top: 10px;
				box-sizing: border-box;
				height: calc(100vh - 60px);
				overflow-y: auto;
				.chat-list{
					width: 100%;
					display: flex;
					flex-direction: row;
					margin-bottom: 15px;
					.chat-list-left{
						width: 30px;
						margin-right: 10px;
						.logo-img{
							width: 26px;
							height: 26px;
							border-radius: 50%;
						}
					}
					.chat-list-right{
						width: calc(100% - 40px);
						font-size: 14px;
						line-height: 20px;
						.ai-img-sheng{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.content-bottom{
				width: 100%;
				padding-top: 10px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 12px;
				color: #999;
				padding-bottom: 100px;
			}
		}
		.content-dibu-box{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			height: calc(50px + env(safe-area-inset-bottom));
			background: #fff;
			box-shadow: 0px 0px 10px #f2f2f2;
			z-index: 10;
			.content-dibu-cotent{
				width: 100%;
				height: 50px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 15px;
			}
			.icon-box-left{
				width: calc(100% - 260px);
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.icon-box{
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 16px;
					margin-right: 10px;
					color: #000;
					position: relative;
					.share-btn{
						position: absolute;
						z-index: 2;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
			.content-dibu-right{
				width: 250px;
				font-size: 14px;
				color: #fff;
				background: $main-color;
				border-radius: 20px;
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
		}
	}
</style>